<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>vue初步了解 | 诶无痕和诶有痕</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="vue的思想mvvm模型model：数据层view：html视图层viewmodel：试图数据 vue的使用方法vue的安装安装脚手架 1npm i -g @vue&#x2F;cli  创建一个项目1vue create &quot;项目名（不能带汉字）&quot; 选择创建一个v2，还是v3项目 查看readme.md文件项目运行后有波浪线(警告)解决办法：在package.json文件中,找到parse">
<meta property="og:type" content="article">
<meta property="og:title" content="vue初步了解">
<meta property="og:url" content="http://example.com/2022/03/15/vue%E5%88%9D%E6%AD%A5%E4%BA%86%E8%A7%A3/index.html">
<meta property="og:site_name" content="诶无痕和诶有痕">
<meta property="og:description" content="vue的思想mvvm模型model：数据层view：html视图层viewmodel：试图数据 vue的使用方法vue的安装安装脚手架 1npm i -g @vue&#x2F;cli  创建一个项目1vue create &quot;项目名（不能带汉字）&quot; 选择创建一个v2，还是v3项目 查看readme.md文件项目运行后有波浪线(警告)解决办法：在package.json文件中,找到parse">
<meta property="og:locale" content="zh_CH">
<meta property="og:image" content="http://example.com/images/9.png">
<meta property="og:image" content="http://example.com/images/10.png">
<meta property="og:image" content="http://example.com/images/12.png">
<meta property="og:image" content="http://example.com/images/13.png">
<meta property="og:image" content="http://example.com/images/11.png">
<meta property="og:image" content="http://example.com/images/14.png">
<meta property="og:image" content="http://example.com/images/15.png">
<meta property="og:image" content="http://example.com/images/16.png">
<meta property="og:image" content="http://example.com/images/17.png">
<meta property="og:image" content="http://example.com/images/18.png">
<meta property="article:published_time" content="2022-03-15T11:50:49.000Z">
<meta property="article:modified_time" content="2022-03-15T12:37:41.715Z">
<meta property="article:author" content="诶无痕和诶有痕">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/images/9.png">
  
    <link rel="alternate" href="/atom.xml" title="诶无痕和诶有痕" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 5.4.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">诶无痕和诶有痕</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-vue初步了解" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/15/vue%E5%88%9D%E6%AD%A5%E4%BA%86%E8%A7%A3/" class="article-date">
  <time datetime="2022-03-15T11:50:49.000Z" itemprop="datePublished">2022-03-15</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      vue初步了解
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="vue的思想"><a href="#vue的思想" class="headerlink" title="vue的思想"></a>vue的思想</h1><h2 id="mvvm模型"><a href="#mvvm模型" class="headerlink" title="mvvm模型"></a>mvvm模型</h2><p>model：数据层<br>view：html视图层<br>viewmodel：试图数据</p>
<h1 id="vue的使用方法"><a href="#vue的使用方法" class="headerlink" title="vue的使用方法"></a>vue的使用方法</h1><h2 id="vue的安装"><a href="#vue的安装" class="headerlink" title="vue的安装"></a>vue的安装</h2><p>安装脚手架</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -g @vue/cli</span><br></pre></td></tr></table></figure>

<h2 id="创建一个项目"><a href="#创建一个项目" class="headerlink" title="创建一个项目"></a>创建一个项目</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue create <span class="string">&quot;项目名（不能带汉字）&quot;</span></span><br></pre></td></tr></table></figure>
<h3 id="选择创建一个v2，还是v3项目"><a href="#选择创建一个v2，还是v3项目" class="headerlink" title="选择创建一个v2，还是v3项目"></a>选择创建一个v2，还是v3项目</h3><p><img src="/images/9.png" alt="img"></p>
<h2 id="查看readme-md文件"><a href="#查看readme-md文件" class="headerlink" title="查看readme.md文件"></a>查看readme.md文件</h2><h1 id="项目运行后有波浪线-警告"><a href="#项目运行后有波浪线-警告" class="headerlink" title="项目运行后有波浪线(警告)"></a>项目运行后有波浪线(警告)</h1><p>解决办法：<br>在package.json文件中,找到parserOptions，并添加”requireConfigFile” : false</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;parserOptions&quot;: &#123;</span><br><span class="line">  &quot;parser&quot;: &quot;@babel/eslint-parser&quot;,</span><br><span class="line">  &quot;requireConfigFile&quot; : false</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="vue语法"><a href="#vue语法" class="headerlink" title="vue语法"></a>vue语法</h1><p><img src="/images/10.png" alt="img"><br>通过render方法渲染App.vue文件，生成一个对象节点（虚拟DOM）。<br>再通过$mount ，将对象挂在到App的#app上</p>
<p>创建一个新的组件，可以通过输入： vue关键字，快捷生成vue模板 </p>
<h2 id="data"><a href="#data" class="headerlink" title="data() {}"></a>data() {}</h2><p>data 函数用于存放变量，且必须返回一个对象<br><img src="/images/12.png" alt="img"></p>
<h3 id="使用数据，变量"><a href="#使用数据，变量" class="headerlink" title="使用数据，变量"></a>使用数据，变量</h3><p>mustache语法,<br>可以动态的获取数据的内容（声明式渲染）<br><img src="/images/13.png" alt="img"></p>
<h1 id="组件之间的引用"><a href="#组件之间的引用" class="headerlink" title="组件之间的引用"></a>组件之间的引用</h1><p>先将需要的文件引入，在注册（（引用）在 export default 中）,注册后就可以将该文件名当标签使用<br><img src="/images/11.png" alt="img"></p>
<h1 id="点击事件"><a href="#点击事件" class="headerlink" title="点击事件"></a>点击事件</h1><p>@click = ‘事件处理函数’ 绑定一个点击事件<br>@  是绑定事件（v-on：）的语法糖<br><img src="/images/14.png" alt="img"></p>
<h2 id="事件处理函数，写在methods中"><a href="#事件处理函数，写在methods中" class="headerlink" title="事件处理函数，写在methods中"></a>事件处理函数，写在methods中</h2><p>methods中不能使用箭头函数<br><img src="/images/15.png" alt="img"></p>
<h2 id="通过点击事件修改数据"><a href="#通过点击事件修改数据" class="headerlink" title="通过点击事件修改数据"></a>通过点击事件修改数据</h2><p>通过this关键字指向data，获取数据<br>this.$data ，获取data函数对象<br>data 是 Observer响应式（响应类型）<br>this 指向当前组件实例（可获取data中的属性，方法）</p>
<p><img src="/images/16.png" alt="img"></p>
<h1 id="绑定属性"><a href="#绑定属性" class="headerlink" title="绑定属性"></a>绑定属性</h1><h2 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind:"></a>v-bind:</h2><p>通过v-bind: 绑定<br>绑定后的属性，就可以使用变量，如下：<br>str2就是变量，而不是字符串了<br><img src="/images/17.png" alt="img"></p>
<h2 id="条件判断"><a href="#条件判断" class="headerlink" title="条件判断"></a>条件判断</h2><h3 id="v-if-“”"><a href="#v-if-“”" class="headerlink" title="v-if = “”"></a>v-if = “”</h3><p>性能消耗高，适合用在广告关闭<br>v-if 可以删除一个节点（v-if = “false”），反之生成（显示）<br><img src="/images/18.png" alt="img"></p>
<h3 id="v-show-“”"><a href="#v-show-“”" class="headerlink" title="v-show = “”"></a>v-show = “”</h3><p>显示或隐藏节点（不是删除），性能消耗低<br>v-show的用法和v-if一样</p>
<h3 id="v-for-“item-in-items”"><a href="#v-for-“item-in-items”" class="headerlink" title="v-for = “item in items”"></a>v-for = “item in items”</h3><p>使用v-for 时要加以一个 :key = “item”  ， 否则会有警告（eslint给的警告）</p>
<p>template中只能放一个标签<br>:key中的值只能是v-for中已经声明的变量<br>数组和对象的遍历方式一样</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- template中只能放一个标签 --&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot;&gt;</span><br><span class="line">    &lt;demoD&gt;&lt;/demoD&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;list&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;user&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;!-- :key中的值只能是v-for中已经声明的变量 --&gt;</span><br><span class="line">      &lt;!-- 数组和对象的遍历方式一样 --&gt;</span><br><span class="line">      &lt;li v-for=&quot;(item,index) in list&quot; :key=&quot;index&quot;&gt;</span><br><span class="line">        &#123;&#123;item&#125;&#125;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">      &lt;li v-for=&quot;(item) in user&quot; :key=&quot;item&quot;&gt;</span><br><span class="line">        &#123;&#123;item&#125;&#125;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">//引用一个组件</span><br><span class="line">import demoD from &#x27;./components/demo-d.vue&#x27;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  //name: &#x27;App&#x27;,</span><br><span class="line">  //注册一个组件</span><br><span class="line">  components: &#123;</span><br><span class="line">    demoD</span><br><span class="line">  &#125;,</span><br><span class="line">  // 数据</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      list:[1,2,3,4,5],</span><br><span class="line">      user:&#123;</span><br><span class="line">        infos:&#x27;你个傻挂&#x27;,</span><br><span class="line">        email:&#x27;nigeshabi@qq.com&#x27;,</span><br><span class="line">        uname:&#x27;阿呆&#x27;,</span><br><span class="line">        sex:&#x27;男&#x27;,</span><br><span class="line">        age:&#x27;17&#x27;</span><br><span class="line">      &#125;,</span><br><span class="line">      isShow:true,</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  // 事件处理函数</span><br><span class="line">  methods:&#123;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h1 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h1><h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><p>输入框中信息改变时，div中的信息也会改变，这是因为message保存的信息改变了，而div使用mustarche语法引用了message。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;cla&quot;&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;message&quot;&gt;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/15/vue%E5%88%9D%E6%AD%A5%E4%BA%86%E8%A7%A3/" data-id="cl0s4e2fk000098w67aaa5veq" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/03/16/%E7%BB%83%E4%B9%A0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A1%A8%E5%8D%95%EF%BC%8C%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          练习条件渲染，列表渲染，表单，获取节点
        
      </div>
    </a>
  
  
    <a href="/2022/03/14/git%E5%9F%BA%E7%A1%80%E5%91%BD%E4%BB%A4%E5%BA%94%E7%94%A8/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">git基础命令应用</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/">vuex学习</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/">vuew-router的基本使用</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/">vue-router的创建过程</a>
          </li>
        
          <li>
            <a href="/2022/03/20/axios%E5%AD%A6%E4%B9%A0/">axios学习</a>
          </li>
        
          <li>
            <a href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/">了解vue组件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2022 诶无痕和诶有痕<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>